用html2canvas或者rasterizeHTML.js插件截图

html2canvas(document.querySelector("#view"), {canvas: canvas, scale: 1}).then(function(canvas) { console.log('Drew on the existing canvas'); // var url = canvas.toDataURL("image/png"); // console.log(url); //// Chrome的实现中的讨论：我们打算阻止网页在TOP Frame中使用A标签、window.open和window.location加载data URL的机制。 //// 原因是data: URLs对用户来说很疑惑，它被广泛用于欺诈和钓鱼攻击中，另外一个问题是它可以被直接发送，比如嵌入邮件中。 //// window.location.href = url; // var iframe = "<iframe width='100%' height='100%' src='" url "'></iframe>"; // document.write(iframe); // 截指定元素的图并保存为图片 //获取年月日作为文件名 var timers=new Date(); var fullYear=timers.getFullYear(); var month=timers.getMonth() 1; var date=timers.getDate(); var randoms=Math.random() ''; //年月日加上随机数 var numberFileName=fullYear '' month date randoms.slice(3,10); var imgData=canvas.toDataURL(); //保存图片 var saveFile = function(data, filename){ var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = filename; var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event); }; //最终文件名 文件格式 var filename = numberFileName '.png'; saveFile(imgData,filename); //document.body.appendChild(canvas); 把截的图显示在网页上 });